<template>
  <div class="app-container">
    <!--查询  -->
    <el-row>
      <el-input
        style="width: 200px"
        v-model="tableQuery.nickname"
        placeholder="昵称"
      ></el-input>
      <span style="margin-right: 15px"></span>
      <el-tooltip class="item" content="搜索" placement="top">
        <el-button
          icon="el-icon-search"
          circle
          @click="fetchData(1)"
          v-perm="'b:windUser:page'"
        ></el-button>
      </el-tooltip>
    </el-row>
    <div style="margin-bottom: 30px"></div>
    <!-- <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleCreate" v-perm="'b:user:add'">{{textMap.create}}</el-button>
    <div style="margin-bottom: 30px;"></div> -->
    <!--列表-->
    <el-table
      style="width: 100%"
      :data="tableData"
      v-loading.body="tableLoading"
      element-loading-text="加载中"
      border
      fit
      highlight-current-row
    >
      <el-table-column prop="topicId" label="试卷套题"></el-table-column>
      <el-table-column prop="textName" label="名称"></el-table-column>
      <el-table-column prop="intoWorld" label="导语"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="specialPrice" label="特价"></el-table-column>
      <el-table-column prop="versionLevel" label="测试等级"></el-table-column>
      <el-table-column prop="testIntroduction" label="测试介绍"></el-table-column>
      <el-table-column prop="participants" label="参与人数"></el-table-column>
      <el-table-column label="操作" fixed="right" width="150px">
        <template slot-scope="scope">
          <el-tooltip content="启用" placement="top" v-if="scope.row.isActive == 0">
            <el-button
              @click="handDisEnble(scope.$index,scope.row,1)"
              size="mini"
              type="text"
              >启用</el-button
            >
          </el-tooltip>
          <el-tooltip
            content="禁用"
            placement="top"
            v-if="scope.row.isActive == 1"
          >
            <el-button
              @click="handDisEnble(scope.$index,scope.row,0)"
              size="mini"
              type="text"
              >禁用</el-button
            >
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-bottom: 30px"></div>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tablePage.current"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="tablePage.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tablePage.total"
    >
    </el-pagination>
  </div>
</template>

<script>
import TestpaperApi from '@/api/testpaper'
import { parseTime, resetTemp } from "@/utils";
import { root, confirm, pageParamNames } from "@/utils/constants";
import debounce from "lodash/debounce";

export default {
  name: "users",

  data() {
    return {
      parseTime: parseTime,
      tableLoading: false,
      tableData: [],
      tableQuery: {
        nickname: null,
      },
      tablePage: {
        current: null,
        pages: null,
        size: null,
        total: null,
      },
    };
  },

  created() {
    this.fetchData();
  },

  watch: {
    //延时查询
    // "tableQuery.nickname": debounce(function () {
    //   this.fetchData();
    // }, 500),
  }, //watch

  methods: {
    //分页
    handleSizeChange(val) {
      this.tablePage.size = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.tablePage.current = val;
      this.fetchData();
    },

    //查询
    fetchData(current) {
      if (current) {
        this.tablePage.current = current;
      }
      this.tableLoading = true;
      TestpaperApi.page(this.tableQuery, this.tablePage).then((res) => {
        this.tableData = res.data.page.records;
        this.tableLoading = false;
        pageParamNames.forEach((name) =>
          this.$set(this.tablePage, name, res.data.page[name])
        );
      });
    },
    //启用/禁用
    handDisEnble(idx,row,isActive) {
        let msg="您确定要启用该用户？";
        if(isActive==0){
            msg="您确定要禁用该用户？"
        }
      this.$confirm(msg, "提示", confirm)
        .then(() => {
          windUserApi.disEnable({ id: row.id,isActive:isActive }).then((res) => {
            this.fetchData();
            this.dialogFormVisible = false;
            this.$message.success("操作成功");
          });
        })
        .catch(() => {
          this.$message.info("已取消操作");
        });
    },
    //查看测试记录
    handleTestCount(userId){

    }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.role-checkbox {
  margin-left: 0px;
  margin-right: 15px;
}
</style>
